<script setup>
import { ref, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { login } from '@/api/user'

const router = useRouter()

const user = ref({
  mobile: '',
  code: ''
})

const countdown = ref(60)
const isCountingDown = ref(false)
const countdownTimer = ref(null)

const Onlogin = async () => {
  try {
    const res = await login(user.value)
    console.log(res)
    await router.push({ name: 'logged_2' })
  } catch (err) {
    console.log(err)
    console.log('登录失败', err)
    alert('登录失败，手机或验证码错误')
  }
}

const getCode = () => {
  if (isCountingDown.value) return

  console.log('发送验证码')

  isCountingDown.value = true
  countdownTimer.value = setInterval(() => {
    if (countdown.value > 0) {
      countdown.value--
    } else {
      clearInterval(countdownTimer.value)
      countdown.value = 60
      isCountingDown.value = false
    }
  }, 1000)
}

onBeforeUnmount(() => {
  if (countdownTimer.value) {
    clearInterval(countdownTimer.value)
  }
})
</script>

<template>
  <div>
    <div id="box">
      <div class="login_box">
        <div class="bg-primary text-white" id="title">
          <router-link to="unlogged" class="p p1">X</router-link>
          <p class="p p2">登录/注册</p>
        </div>
        <div id="login_info">
          <div id="login_phone">
            <i class="toutiao toutiao-shouji1"></i>
            <input type="text" v-model="user.mobile" placeholder="请输入手机号">
          </div>
          <div id="login_code">
            <i class="toutiao toutiao-yanzhengma"></i>
            <input type="text" v-model="user.code" placeholder="请输入验证码">
            <button id="code_btn" :disabled="isCountingDown" @click="getCode">
              {{ isCountingDown ? `${countdown}秒后重试` : '获取验证码' }}
            </button>
          </div>
          <div id="login">
            <button class="bg-primary" id="login_btn" @click="Onlogin">登录</button>
          </div>
          <div id="word">
            <p>账号：13888888888, 密码：246810</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
@import "~@/assets/bootstrap.min.css";
*{
  margin: 0;
  padding: 0;
}
#title{
  position: relative;
  display: flex;
  align-items: center;
  height: 40px;
}
.p{
position: absolute;
}
.p1{
  left: 10px;
  color: white;
}
.p2{
  left: 42%;
  font-size: 15px;
}
input{
  width: 60%;
  margin-left: 10px;
  outline: none;
  border: none;
}
#box{
  width: 100%;
  height: 900px;
  background-color: #eae7e7;
  font-size: 12px;
}
#login_phone{
  display: flex;
  align-items: center;
  padding-left: 10px;
  margin-bottom: 1px;
  height: 35px;
  background-color: white;
}
#login_code{
  display: flex;
  align-items: center;
  padding-left: 10px;
  height: 35px;
  background-color: white;
}
#code_btn{
  width: 70px;
  height: 30px;
  border: none;
  background-color: #56a949;
  color: white;
  border-radius: 1px;
}
#login{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;

}
#login_btn{
  border: none;
  width: 80%;
  height: 35px;
  border-radius: 2px;
  color: white;
}
#word{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  color: grey;
}
</style>